<!DOCTYPE html>
<html>
<!-- reference: https://github.com/TriliumNext/Notes/blob/v0.93.0/src/public/app/widgets/type_widgets/geo_map.ts -->
<head>
    <title>Geomap note</title>
    <meta charset="UTF-8"/>
    <link
            rel="stylesheet"
            href="https://esm.sh/leaflet@1.9.4/dist/leaflet.css"
    />
    <link rel="stylesheet" href="https://esm.sh/boxicons@2.1.4/css/boxicons.min.css"/>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            height: 100vh;
            width: 100vw;
        }
        :root {
            --theme-style: light;
        }
        @media (prefers-color-scheme: dark) {
            :root {
                --theme-style: dark;
                background-color: black;
            }
        }

        .leaflet-pane {
            z-index: 1;
        }

        .geo-map-container.placing-note {
            cursor: crosshair;
        }

        .geo-map-container .marker-pin {
            position: relative;
        }

        .geo-map-container .leaflet-div-icon {
            position: relative;
            background: transparent;
            border: 0;
            overflow: visible;
        }

        .geo-map-container .leaflet-div-icon .icon-shadow {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .geo-map-container .leaflet-div-icon .bx {
            position: absolute;
            top: 3px;
            left: 2px;
            background-color: white;
            color: black;
            padding: 2px;
            border-radius: 50%;
            font-size: 17px;
        }

        .geo-map-container .leaflet-div-icon .title-label {
            display: block;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.75rem;
            height: 1rem;
            color: black;
            width: 150px;
            text-align: center;
            text-overflow: ellipsis;
            text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
            white-space: no-wrap;
            overflow: hidden;
        }

        .note-detail-geo-map,
        .geo-map-widget,
        .geo-map-container {
            height: 100%;
            overflow: hidden;
        }

        .leaflet-top,
        .leaflet-bottom {
            z-index: 900;
        }
    </style>
    <script type="importmap">
        {
          "imports": {
            "leaflet": "https://esm.sh/leaflet@1.9.4/es2022/leaflet.mjs"
          }
        }
    </script>
</head>

<body>
<div class="note-detail-geo-map note-detail-printable">
    <div class="geo-map-widget">
        <div class="geo-map-container"></div>
    </div>
</div>
<script type="module" src="/geomap_loader.js"></script>
</body>
</html>
